<template>
    <div>
        <router-link
             tag="div"
             to="/"
             class="header-abs"
             v-show="showAbs"
             >
             <div class="iconfont back-icon header-abs-back" >&#xe624;</div>
        </router-link>
        <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
            <router-link tag="div" to="/" >
                <div class="iconfont back-icon header-fixed-back" >&#xe624;</div>
                景点详情
            </router-link>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'DetailHeader',
        data(){
          return{
            showAbs:true,
            opacityStyle:{
                opacity:0
            }
          }
        },
        methods:{
           handleScroll(){
               const top=document.documentElement.scrollTop;
               if(top>60){
                   let opacity=top/140;
                   opacity=opacity>1?1:opacity;
                   this.opacityStyle={
                       opacity
                   };
                   this.showAbs=false;
               }else{
                   this.showAbs=true;
               }
           }

        },
        activated(){
           //这个将会在所有的页面起作用
           window.addEventListener('scroll',this.handleScroll)
        },
        deactivated(){
           //页面即将被隐藏或者页面即将被替换的时候触发
           window.removeEventListener('scroll',this.handleScroll)
        }
    }
</script>
<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .header-abs
      position: absolute
      left: .2rem
      top: .2rem
      width: .8rem
      height: .8rem
      line-height: .8rem
      border-radius: .4rem
      text-align: center
      background: rgba(0, 0, 0, .8)
      .header-abs-back
        color: #fff
        font-size: .4rem
    .header-fixed
      z-index: 2
      position: fixed
      top: 0
      left: 0
      right: 0
      height: .68rem
      line-height: .68rem
      text-align: center
      color: #fff
      background: $bgColor
      font-size: .32rem
      .header-fixed-back
        position: absolute
        top: 0
        left: 0
        width: .64rem
        text-align: center
        font-size: .4rem
        color: #fff
</style>